<template>
  <div class="history-record" :class="{ 'hide-list': hideList }">
    <div class="history-record-header">
      <div v-show="!hideList" class="history-record-header-title">历史记录</div>
      <div class="history-record-header-icon" @click="handleHideList">
        <img alt="" class="history-record-icon" :class="{ 'history-record-icon2': hideList }" src="../../../assets/images/left-arrow.png" />
      </div>
    </div>

    <!-- 新建对话 -->
    <div class="history-record-add-new" :class="{ 'history-record-add-new2': hideList }" @click="handleAddNew">
      <img alt="" class="history-record-add-new-icon" src="../../../assets/images/add-new.png" />
    </div>

    <div class="history-record-list">
      <div
        v-for="(record, index) in chatRecordList"
        :key="record.id"
        class="history-record-item"
        :class="{ 'active-history-record-item': activeId === record.id }"
        @click="handleClickRecord(record)"
      >
        <div class="history-record-item-title">{{ record.title }}</div>
        <div class="history-record-item-date">
          <div class="history-record-item-date-left">{{ record.date }}</div>
          <div v-show="activeId === record.id" class="history-record-item-date-right" @click="handleDeleteRecord(record, index)">
            <i class="el-icon-delete"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getRecordList } from '@/api/chat'

  export default {
    name: 'HistoryRecord',
    data() {
      return {
        chatRecordList: [],
        activeId: '',
        hideList: false,
      }
    },
    created() {
      this.getData()
    },
    mounted() {
      // this.activeId && this.handleChat()
    },
    methods: {
      getData() {
        getRecordList(this.$route.path)
          .then((res) => {
            this.chatRecordList = res
            this.activeId = this.chatRecordList.length > 0 ? this.chatRecordList[0].id : ''
            this.handleChat()
          })
          .catch((e) => {
            console.log(e)
          })
      },
      handleHideList() {
        this.hideList = !this.hideList
      },
      handleClickRecord(record) {
        this.activeId = record.id
        this.handleChat()
      },
      handleDeleteRecord(record, index) {
        this.chatRecordList.splice(index, 1)
        this.activeId = this.chatRecordList[index].id
        this.handleChat()
      },
      handleChat() {},
      handleAddNew() {
        this.$emit('add-new')
      },
    },
  }
</script>

<style scoped lang="scss">
  .history-record {
    width: 200px;
    height: 100%;
    background-color: #ffffff;
    transition: 0.5s all;
    border-right: 1px solid #999999;

    &.hide-list {
      width: 80px;
    }
  }

  .history-record-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;

    .history-record-header-title {
      width: 100%;
      font-weight: 600;
      white-space: nowrap;
    }

    .history-record-header-icon {
      width: 18px;
      height: 16px;
      flex-shrink: 0;

      .history-record-icon {
        width: 100%;
        height: 100%;
        vertical-align: baseline;
        transition: 0.5s all;

        &.history-record-icon2 {
          transform: rotate(180deg);
        }
      }
    }
  }

  .history-record-add-new {
    width: calc(100% - 30px);
    padding: 0 15px;
    transition: 0.5s all;
    cursor: pointer;

    &.history-record-add-new2 {
      width: 0;
    }

    .history-record-add-new-icon {
      width: 100%;
      vertical-align: baseline;
    }
  }

  .history-record-list {
    height: calc(100vh - 160px);
    overflow-y: auto;
    transition: 0.5s all;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */

    .history-record-item {
      width: calc(100% - 5px);
      padding: 12px 15px;
      box-sizing: border-box;

      &.active-history-record-item {
        border-left: 2px solid rgba(18, 53, 148, 0.5);
        background-color: rgb(248, 248, 248);
        box-shadow: 2px 2px 2px #efefef;
      }
    }

    .history-record-item-title {
      width: 100%;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #2f74ff;
      margin: 0 0 5px;
    }

    .history-record-item-date {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #999999;
      overflow: hidden;

      .history-record-item-date-left {
        white-space: nowrap;
      }

      .el-icon-delete {
        font-size: 16px;
      }
    }
  }

  .history-record-list::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
</style>
